import { memo, useEffect, useCallback, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Popup, Badge, Dropdown, Space, MessagePlugin } from 'tdesign-react';
import {
  Icon,
  LogoGithubIcon,
  MailIcon,
  HelpCircleIcon,
  SettingIcon,
  PoweroffIcon,
  UserCircleIcon,
} from 'tdesign-icons-react';
import store, { useAppDispatch } from 'modules/store';
import { toggleSetting } from 'modules/global';
import Style from './HeaderIcon.module.less';
import { LogoutAPI } from '@/api/user.api';
import localforage from 'localforage';

const { DropdownMenu, DropdownItem } = Dropdown;

export default memo(() => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const { name } = store.getState().user.data || { name: "姓名" };

  const gotoWiki = () => {
    window.open('');
  };

  const gotoGitee = () => {
    window.open('https://gitee.com/tmkbk/software-project');
  };

  const clickHandler = (data: any) => {
    if (data.value === 1) {
      navigate('/center');
    }
  };
  const handleLogout = async () => {
    LogoutAPI().then((res) => {
      if (res.data.status === 200) {
        MessagePlugin.success('退出成功');
        // 清除token
        localStorage.removeItem('HIST-token');
        // 清除用户信息
        localforage.removeItem('HIST-userInfo');
        navigate('/login');
      } else {
        MessagePlugin.error(res.data.message);
      }
    })

  };

  return (
    <Space align='center'>
      <Popup content='消息' placement='bottom' showArrow destroyOnClose>
        <Badge className={Style.badge} count={6} dot={false} maxCount={99} shape='circle' showZero={false} size='medium'>
          <Button
            className={Style.menuIcon}
            shape='square'
            size='large'
            variant='text'
            onClick={() => { navigate('/notification') }}
            icon={<MailIcon />}
          />
        </Badge>
      </Popup>
      {/* 代码仓库 */}
      <Popup content='代码仓库' placement='bottom' showArrow destroyOnClose>
        <Button
          className={Style.menuIcon}
          shape='square'
          size='large'
          variant='text'
          onClick={gotoGitee}
          icon={<LogoGithubIcon />}
        />
      </Popup>
      {/* 帮助文档 */}
      <Popup content='帮助文档' placement='bottom' showArrow destroyOnClose>
        <Button
          className={Style.menuIcon}
          shape='square'
          size='large'
          variant='text'
          onClick={gotoWiki}
          icon={<HelpCircleIcon />}
        />
      </Popup>
      {/* 头部下拉框 */}
      <Dropdown trigger={'click'} onClick={clickHandler}>
        <Button variant='text' className={Style.dropdown}>
          <Icon name='user-circle' className={Style.icon} />
          <span className={Style.text}>{name}</span>
          <Icon name='chevron-down' className={Style.icon} />
        </Button>
        <DropdownMenu>
          <DropdownItem value={1}>
            <div className={Style.dropItem}>
              <UserCircleIcon />
              <span>个人中心</span>
            </div>
          </DropdownItem>
          <DropdownItem value={1} onClick={handleLogout}>
            <div className={Style.dropItem}>
              <PoweroffIcon />
              <span>退出登录</span>
            </div>
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Popup content='页面设置' placement='bottom' showArrow destroyOnClose>
        <Button
          className={Style.menuIcon}
          shape='square'
          size='large'
          variant='text'
          onClick={() => dispatch(toggleSetting())}
          icon={<SettingIcon />}
        />
      </Popup>
    </Space >
  );
});
